博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
图片上传及显示(包含多文件)
阅读量:5091 次
发布时间:2019-06-13

本文共 2691 字,大约阅读时间需要 8 分钟。

前一段时间用到文件上传,好久没有写这个东西,有的东西也忘记了。所以本篇博客BZ决定记载一下,一方面自己回顾加深一下,另一方面供各位程序员学习。

希望大神们对本文不对的地方进行批评指正!

先在我们的html页面写上上传文件的文本框及图片显示所在的DIV,如下:

1 
2
3
4
5 点击这里上传图片 6
[ 建议上传图片208px*160px ] 7
8
9 10
11
View Code

BZ在图片上传用到了Ajax,并且传多去三个参数,下面粘上js调用代码块:

1 function ajaxFileUpload(id, contentid,imgid) { 2     $.ajaxFileUpload 3     ( 4         {
// 5 url: '../Handler/DataHandler.ashx', //用于文件上传的服务器端请求地址 6 secureuri: false, //一般设置为false 7 fileElementId: id, //文件上传空间的id属性 8 //dataType: 'json', //返回值类型 一般设置为json 9 success: function (data, status) //服务器成功响应处理函数10 {11 var obj = eval('(' + $(data).text() + ')');12 $("#" + contentid).html("");13 $("#" + contentid).append("
")14 },15 error: function (data, status, e)//服务器响应失败处理函数16 {17 alert(e);18 }19 }20 )21 return false;22 }
View Code

在这里给大家介绍一下上传三个参数的原因:input的id是为了区分图片的分组情况(假设要上传所需的两组图片),div的id是确定图片将显示在哪个div中。

附上服务器端请求地址代码块:

public void ProcessRequest(HttpContext context)        {            //context.Response.ContentType = "text/plain";            //context.Response.Write("Hello World");                     //在此处写入您的处理程序实现。            HttpFileCollection files = context.Request.Files;            if (files != null && files.Count > 0)            {                HttpPostedFile file = files[0];                string tmpPath = context.Server.MapPath("/Upload/");                string fileName = DateTime.Now.ToString("yyyyMMddHHmissfff") + System.IO.Path.GetFileName(file.FileName);                file.SaveAs(tmpPath + fileName);                context.Response.Clear();                context.Response.Write(@"{                    status : 'success',                     msg: {                         PicUrl : '" + "/upload/" + fileName + @"'                    }                }");                context.Response.End();            }        }
View Code

图片的命名格式是以年月日+图片的名称。Upload是将图片上传在Upload文件夹里。

看到这里大家应该都明白,重点来了!!!

多图片上传呢??其实很简单,就是将第二段代码块中的一句话注释掉就OK!

$("#" + contentid).html("");

即将图片所在的div不再清空!!

可以写一个js规定图片路径的储存,运用循环的方式将选择的图片路径保存在数据库!大功告成!

感谢大家关观看本篇博客,希望更多和我一样的小菜积极学习,同样希望大神们对本篇博客的不足之处提出意见!谢谢大家!

 

转载于:https://www.cnblogs.com/A-aron/p/5867381.html

你可能感兴趣的文章
sublime 配置java运行环境
查看>>
在centos上开关tomcat
查看>>
重启rabbitmq服务
查看>>
无人值守安装linux系统
查看>>
【传道】中国首部淘宝卖家演讲公开课:农业本该如此
查看>>
jQuery应用 代码片段
查看>>
MVC+Servlet+mysql+jsp读取数据库信息
查看>>
黑马程序员——2 注释
查看>>
用OGRE1.74搭建游戏框架(三)--加入人物控制和场景
查看>>
转化课-计算机基础及上网过程
查看>>
android dialog使用自定义布局 设置窗体大小位置
查看>>
ionic2+ 基础
查看>>
互联网模式下我们更加应该“专注”
查看>>
myeclipse集成jdk、tomcat8、maven、svn
查看>>
查询消除重复行
查看>>
Win 10 文件浏览器无法打开
查看>>
[leetcode]Minimum Path Sum
查看>>
内存管理 浅析 内存管理/内存优化技巧
查看>>
【BZOJ 5222】[Lydsy2017省队十连测]怪题
查看>>
Java跟Javac,package与import
查看>>